<template>
    <div>
        <mu-paper class="paperz" :zDepth="2">
            <p>本用户名：{{userInfo.user}}</p>
            <p>余额：{{userInfo.balance}}</p>
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item>
                    <el-input placeholder="请输入手机号" size="mini" v-model="searchList.searchValue"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" @click="searchClick">搜索
                    </el-button>
                </el-form-item>
            </el-form>


            <el-table
                    :data="tableData"
                    style="width: 55%;float: left;">
                <el-table-column
                        prop="id"
                        label="序号"
                        width="100"
                >
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="手机号"
                        width="200"
                >
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="200"
                >
                </el-table-column>
                <el-table-column
                        prop="user"
                        label="审核人"
                        width="100"
                >
                </el-table-column>

                <el-table-column

                        label="金额"
                        width="100"
                >
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.money" placeholder="请输入金额" size="mini"></el-input>
                    </template>
                </el-table-column>

                <el-table-column
                        label="备注"
                        width="100"
                >
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.text" placeholder="打款理由" size="mini"></el-input>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="80">
                    <template slot-scope="scope">
                        <el-button size="mini"
                                   @click="swPhoneStatus(scope.row.id, scope.row.money,scope.row.text)">
                            打款
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    :page-size="20"
                    :current-page="searchList.pn"
                    layout="prev, pager, next"
                    :total="searchList.total"
                    @current-change="pnChange"
                    v-if="searchList.total > 20"
            >
            </el-pagination>
            <el-table
                    :data="tableData"
                    style="width: 45%;float: left;">
                <el-table-column
                        prop="id"
                        label="序号"
                        width="100"
                >
                </el-table-column>
                <el-table-column
                        prop="user"
                        label="用户名"
                        width="100"
                >
                </el-table-column>


                <el-table-column
                        prop="money"
                        label="余额"
                        width="100"
                >
                </el-table-column>
                <el-table-column label="操作" width="80">
                    <template slot-scope="scope">
                        <el-button size="mini"
                                   @click="swPhoneStatus(scope.row.id, scope.row.money,scope.row.text)">
                            打款
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
            <!--<div style="margin-top: 35px;" class="end">
                <h3 style="text-align: center;">打款记录</h3>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item>
                        <el-input placeholder="请输入手机号" size="mini" v-model="searchLogList2.searchValue"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="mini" @click="getPhoneBilling">搜索
                        </el-button>
                    </el-form-item>
                </el-form>


                <el-table
                        :data="moneyList"
                        style="width: 100%;"
                        v-if="searchLogList2.searchValue"
                >
                    <el-table-column
                            type="selection"
                            width="40">
                    </el-table-column>

                    <el-table-column
                            prop="id"
                            label="序号"
                            width="80"
                    >
                    </el-table-column>


                    <el-table-column
                            prop="user"
                            label="用户"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            width="120">
                    </el-table-column>

                    <el-table-column
                            prop="pay"
                            label="支付方式"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="payname"
                            label="支付账户"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="orderId"
                            label="交易单号"
                            width="180"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="explain"
                            label="说明"
                            width="180"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="change"
                            label="变化"
                            width="100"
                    >
                        <template slot-scope="scope">
                            <div>
                                <mu-badge :content="scope.row.change" color="rgb(63, 158, 255)" slot="after"
                                          v-if="scope.row.change > 0"/>
                                <mu-badge :content="scope.row.change" color="red" slot="after" v-else/>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="money"
                            label="剩余"
                            width="100"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="addTime"
                            label="日期"
                            width="180"
                    >
                        <template slot-scope="scope">
                            {{scope.row.addTime | timeTo(1)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="text"
                            label="备注"
                            width="100"
                    >
                    </el-table-column>
                </el-table>
            </div>-->


        </mu-paper>
    </div>
</template>
<script>
    export default {
        name: 'AdminPhone',
        data() {
            return {
                userInfo:{},
                tableData: [],
                searchList: {
                    search: 'phone',
                    searchValue: '',
                    total: 0,
                    pn: 1,
                },
                searchLogList: {
                    search: 'phone',
                    searchValue: '',
                },
                moneyList: [],
                moneyListShow: false,
                searchLogList2: {
                    search: 'user',
                    searchValue: '',
                    pn: 1,

                },
            }
        },
        methods: {
            getUserInfo() {
                let _this = this;
                _this.$http.post("/jfxy/", {
                    id: "getUserInfo",
                }).then(function (response) {
                    _this.userInfo = response.data.data;
                });
            },
            searchLogClick() {
                let _this = this;
                _this.moneyListShow = true;
                _this.$http.post("/api/api.php", {
                    id: "getPhoneLogList",
                    search: JSON.stringify(_this.searchLogList)
                }).then(function (response) {
                    _this.moneyList = response.data.data;
                });
            },
            searchClick() {
                this.getGoodCommentList();
            },
            pnChange(pn) {
                this.searchList.pn = pn;
                this.getGoodCommentList();
            },
            getGoodCommentList() {
                let _this = this;
                _this.$http.post("/api/api.php", {
                    id: "getPhoneList",
                    search: JSON.stringify(_this.searchList)
                }).then(function (response) {
                    _this.tableData = response.data.data;
                });
            },
            updatePhoneState(a, b, c) {
                let _this = this;
                _this.$http.post("/api/api.php", {
                    id: "swPhoneStatus",
                    user: a,
                    value: b,
                    text: c
                }).then(function (response) {
                    _this.$message({
                        type: response.data.status,
                        message: response.data.msg
                    });
                    _this.getGoodCommentList();
                });
            },
            swPhoneStatus(a, b, c) {
                let _this = this;
                let title;
                title = '通过后将立即打款给用户';
                if (b === '1') {
                    _this.$confirm(title, "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        /*type: "warning",*/
                        customClass: "phone_tips"
                    }).then(() => {
                        _this.updatePhoneState(a, b, c);
                    });
                } else {
                    _this.$confirm(title, "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }).then(() => {
                        _this.updatePhoneState(a, b);
                    });
                }
            },
            getPhoneBilling() {
                let _this = this;
                _this.$http.post("/api/api.php", {
                    id: "getPhoneBilling",
                    search: JSON.stringify(_this.searchLogList2)
                }).then(function (response) {
                    _this.moneyList = response.data.data;
                });
            }
        },
        mounted() {
            this.getGoodCommentList();
            this.getUserInfo();
        }
    }
</script>
<style>
    .paperz {
        min-height: 860px;
        padding: 15px;
    }

    .phone_tips {
        width: 320px;
    }

    .end .cell {
        color: #00b7ee;
    }
</style>